<template>
  <div>
    <div class="header">
      <div
        v-for="(item, index) in cardArray"
        :key="index"
        :style="{ 'background-image': 'url(' + item.images + ')' }"
        :class="['card', { active: checkedIndex !== index }]"
        @click="checkedClick(item, index)"
      >
        <p class="eleCoin">
          <span>{{ item.consume }}</span
          >{{ item.name }}
        </p>
        <p class="cost">{{ item.money }}</p>
        <p class="detailText" v-if="item.full">
          可享余额<span>满{{ item.full }}</span
          >{{item.remind_before_day}}<span>{{ item.free }}</span>
        </p>
      </div>
    </div>
    <button class="recharge" @click="btnFn">确认充值</button>
    <p v-if="isrefund == 1" class="refund-p" @click="requestRefund">申请退款</p>
    <van-dialog
      v-model="tipsShow"
      title="温馨提示"
      :show-cancel-button="false"
      :showConfirmButton="false"
      width="8.5rem"
    >
      <div v-if="timeoutShow">
        <div class="closeImg" @click="cancel">
          <img src="../../assets/img/choujiangtkjh.png" alt="" />
        </div>
        <p class="tipsContent">{{ userText }}</p> 
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 0.5rem;
          "
        >
          <button class="cancelBtn" @click="cancel">取消</button>
          <button class="confirmBtn" @click="refundFn">确定</button>
        </div>
      </div>
      <div v-else>
        <div class="closeImg" @click="cancel">
          <img src="../../assets/img/choujiangtkjh.png" alt="" />
        </div>
        <p class="tipsContent">
          {{ userText }}
        </p>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 0.5rem;
          "
        >
          <button class="cancelBtn" @click="cancel">取消</button>
          <button class="confirmBtn" @click="customerFn">联系客服</button>
        </div>
      </div>
    </van-dialog>
    <van-dialog
      v-model="isSureShow"
      title="温馨提示"
      :show-cancel-button="false"
      :showConfirmButton="false"
      width="8.5rem"
    >
      <div>
        <div class="closeImg" @click="cancel">
          <img src="../../assets/img/choujiangtkjh.png" alt="" />
        </div>
        <p class="tipsContent">{{ '本次充值为' +this.consume + '元，请确认是否充值!'}}</p>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 0.5rem;
          "
        >
          <button class="cancelBtn" @click="cancel">取消</button>
          <button class="confirmBtn" @click="sureFn">充值</button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { FulfilList, is_refund } from "@/api/fulfil.js";
export default {
  data() {
    return {
      isSureShow: false,
      isAndroid: false,
      isIOS: false,
      cont: {
        reserve_4: "2",
        member: "1", // 活动支付类型
        price: 30000, // 金额
        card_id: "0", // 活动id
        price_id: 1,
      },
      cardArray: [],
      tipsShow: false,
      timeoutShow: true,
      checkedIndex: 0,
      userid_locked: "",
      platform: "",
      userText: "",
      open: null,
      id: null,
      phone: null,
      consume:300,
      isrefund:1, // 1 显示  2 不显示
    };
  },
  activated(){
    this.checkedIndex = this.$route.query.index;
      this.userid_locked = localStorage.getItem("Uid");
    this.isAndroid =
      navigator.userAgent.indexOf("Android") > -1 ||
      navigator.userAgent.indexOf("Linux") > -1;
    this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
   this.getFulfilPage();
  },
  created() {
 
  },
  mounted() {
  },
  methods: {
    btnFn() {
      if (!this.cont.price) {
        this.$Toast("请选择充值金额");
      } else {
        this.isSureShow = true;
      }
    },
    // 确认充值吗
    sureFn() {
      this.isSureShow = false;
      // 将数据转换为json字符串传给后端
      let cont = JSON.stringify(this.cont).toString();
      // 安卓
      if (window.__wxjs_environment === "miniprogram") {
        wx.miniProgram.navigateTo({
          url: `/pages/pay/h5-pay?fee=${
            this.cont.price / 100
          }&member=1&cardId=0&status=6&cont=${cont}`,
        });
      } else if (this.isAndroid == true) {
        window.TiantianCharge_Android.pay(this.cont.price, "1", "1", cont);
        // ios
      } else if (this.isIOS == true) {
        window.webkit.messageHandlers.pay.postMessage({
          price: this.cont.price,
          member: "1",
          battery: "",
          cont: cont,
        });
      }

    },
    // 申请退款
    requestRefund() {
      if (this.open == 0) {
        this.$Toast(this.userText);
      } else if (this.open == 1) {
        this.tipsShow = true;
        this.timeoutShow = false;
      } else {
        this.tipsShow = true;
      }
    },
    // 联系客服按钮
    customerFn() {
      this.tipsShow = false;
      if (window.__wxjs_environment === "miniprogram") {
        window.location.href = "tel:" + this.phone;
      } else if (this.isAndroid == true) {
       window.location.href = "tel:" + this.phone;
        // ios
      } else if (this.isIOS == true) {
        window.webkit.messageHandlers.call.postMessage( this.phone );
      }
     
    },
    // 退款确定按钮
    refundFn() {
      is_refund({
        userid_locked: this.userid_locked,
        id:this.cont.price_id
      }).then((res) => {
        console.log(res);
        if (res.data.result_code != 200) {
          this.$Toast(res.data.msg);
        } else {
          this.$Toast(res.data.msg);
          this.tipsShow = false;
          this.getFulfilPage();
        }
      }).catch((error)=>{
        console.log(error);
      })
    },
    // 取消关闭弹框
    cancel() {
      this.isSureShow = false;
/*       this.timeoutShow = true;
 */      this.tipsShow = false;
    },
    // 选中卡片样式
    checkedClick(item, index) {
      this.consume = parseInt(item.consume);
      this.cont.price = item.price;
      this.cont.price_id = item.id;
      this.checkedIndex = index;
    },
    // 页面数据
    getFulfilPage() {
      const data = {
        userid_locked: this.userid_locked,
      };
      FulfilList(data).then((res) => {
        this.cardArray = res.data.data.list;
        this.userText = res.data.data.info;
        this.open = res.data.data.open;
        this.phone = res.data.data.tel;
        this.isrefund = res.data.data.is_refund;
        this.consume = res.data.data.list[this.checkedIndex].consume;
        this.cont.price = res.data.data.list[this.checkedIndex].price;
        this.cont.price_id = res.data.data.list[this.checkedIndex].id;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 10rem;
  overflow-x: auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
}
.card {
  width: 95%;
  height: 3rem;
  margin: 0.3rem auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  color: #ffffff;

  &.active {
    opacity: .3;
  }
}

.eleCoin {
  position: absolute;
  top: 0.33rem;
  left: 0.4rem;
  font-size: 0.35rem;
  font-weight: bold;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  display: flex;
  align-items: baseline;

  span {
    font-size: 0.75rem;
    margin-right: 0.2rem;
  }
}

.cost {
  font-size: 0.4rem;
  position: absolute;
  top: 2.2rem;
  left: 0.4rem;
  font-weight: bold;
}

.detailText {
  font-size: 0.35rem;
  position: absolute;
  top: 2.22rem;
  left: 3.6rem;
  font-weight: bold;

  span {
    color: #ae3400;
  }
}

.recharge {
  position: absolute;
  top: 11.85rem;
  left: 2.5%;
  width: 95%;
  height: 1rem;
  display: block;
  border-radius: 0.6rem;
  border: none;
  background: linear-gradient(315deg, #4441ee 0%, #920ccc 100%);
  color: #ffffff;
  font-size: 0.4rem;
  font-family: PingFang SC-Heavy, PingFang SC;
  font-weight: 800;
}

.tipsContent {
  width: 6.125rem;
  height: 2rem;
  font-size: 0.4rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #111111;
  margin: 0 auto;
}

::v-deep .van-dialog__header {
  padding-bottom: 0.5rem;
  font-weight: bold;
  line-height: 0.8rem;
  text-align: center;
  font-size: 0.45rem;
}

.confirmBtn {
  width: 3rem;
  height: 1rem;
  background: linear-gradient(315deg, #4441ee 0%, #920ccc 100%);
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.25);
  border-radius: 0.6rem;
  opacity: 1;
  color: #ffffff;
  border: none;
  font-size: 0.4rem;
}

.cancelBtn {
  width: 3rem;
  height: 1rem;
  background: #e2c7ff;
  box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.25);
  border-radius: 0.6rem;
  opacity: 1;
  color: #6533d2;
  border: none;
  font-size: 0.4rem;
}

.van-dialog {
  height: 5.775rem;
  position: relative;
  bottom: 2rem;
}

.closeImg {
  position: absolute;
  left: 7.5rem;
  bottom: 4.8rem;

  img {
    width: 0.5rem;
    height: 0.5rem;
  }
}
.refund-p {
  position: absolute;
  left: 43%;
  top:13.85rem;
  text-align: center;
  font-size: 0.35rem;
}
</style>